<script setup>
import { ref, defineEmits } from 'vue';
const props = defineProps({
    data: {
        type: String,
        required: true
    }
});
const itemText = ref(props.data);
console.log(itemText);

const count = ref(0);
const emits = defineEmits(['updateCount']);
const decrement = () => {
    if (count.value == 0) {
        count.value = 0
    } else {
        count.value--;
        emits('updateCount', count.value);
    }

};
const increment = () => {
    count.value++;
    emits('updateCount', count.value);
};
</script>
<template>
    <div class="box">
        <!-- <div :title="itemText.name">
            <img :src="'/src/assets/image/' + itemText.tu + '.jpg'" alt="">
            {{ itemText.name }}
        </div>
        <div>￥{{ itemText.qian }}</div> -->
        <div>
            <button @click="decrement">-</button>
            <span>{{ count }}</span>
            <button @click="increment">+</button>
        </div>
        <!-- <div>{{ count * itemText.qian }}</div> -->
    </div>

</template>
<style scoped>
button {
    width: 20px;
    font-size: 16px;
}

span {
    display: inline-block;
    width: 22px;
    text-align: center;
}
.box{
    width: 400px;
    display: flex;
    justify-content: space-between;
}
.box>div{
    font-size:14px;
    width:70px;
    border:1px solid red;
    display: flex; 
    /* justify-content: center; */
    align-items: center;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}
div>img {
    width: 20px;
    height: 20px;
}
</style>
